<template>
   <div class="main">
    <h2 class="user-title"><span>领样记录</span></h2>
    <div class="table-content">
      <div class="table-title">
        <span>商品</span>
        <span>单价（元）</span>
        <span>数量</span>
        <span>总金额（元）</span>
        <span>全部状态</span>
        <span>操作</span>
      </div>
      <div class="record-table" v-for="item in recordList" :key="item.productId" v-if="recordList.length>0">
        <div class="table-tbody">
          <p class="record-time">领样时间：{{item.getTime}}</p>
          <div class="record-detail">
            <div class="record-left">
              <div class="record-img">
                <img :src="item.productCover" :alt="item.productName" width="100%" height="100%">
              </div>
              <div class="record-name">
                <p>{{item.productName}}</p>
                <!-- <p></p> -->
              </div>
              <div class="record-price">{{item.sellPrice}}</div>
              <div class="record-num">{{item.num}}</div>
            </div>
            <div class="record-right">
              <div>{{item.sellPrice}}</div>
              <div class="record-status">{{dispateStatusTypes.Types[item.dispateStatus]}}</div>
              <div class="record-wl" @click="goOrder(item)"><span>查看物流</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="record-table-no"  v-if="recordList.length === 0">
        暂无领样记录
      </div>
    </div>
    <v-pagination v-if="total" :pg="page" :size="pageSize" :total="total" @page-change="pageChange"></v-pagination>
   </div>
</template>

<script>
import {dispateStatusTypes} from '@/util/enums'
import vPagination from '@/components/public/pagination'
export default {
  data () {
    return {
      dispateStatusTypes: dispateStatusTypes,
      page: 1,
      pageSize: 10,
      total: 0,
      recordList: [],
      status: '' // 状态
    }
  },
  components: {
    vPagination
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.status = '1'
      this.getRecord()
    },
    getRecord () {
      this.msgList = []
      this.$http.post(this.$api + '/pc/product/mySampleRecordList', {
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        if (res.responseCode === '0000') {
          this.recordList = res.data.list
          this.total = res.data.total
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
      })
    },
    // 切换页面
    pageChange (pg) {
      this.page = pg
      this.getData()
    },
    // 跳转至物流详情页
    goOrder (item) {
      if (item.dispateStatus) {
        this.$router.push('/order/logistics?orderId=' + item.id)
      } else {
        this.$message.error({
          message: '暂未发货'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
  .table-content{
    margin-top: 20px;
    font-size: $fz_14;
    color: $f_main;
    .table-title {
      height: 30px;
      line-height: 30px;
      background: $bg_dark;
      span:first-child {
        padding:0 196px 0 208px;
      }
      span:nth-child(3) {
        padding: 0 142px 0 42px;
      }
      span:nth-child(5) {
        padding: 0 52px 0 40px;
      }
    }
    .record-table{
      border-bottom: 1px solid $border_color;
      .table-tbody{
        background: #ffffff;
        border: 1px solid $border_color;
        margin: 20px 0;
        .record-time{
          padding-left: 15px;
          height: 38px;
          line-height: 38px;
          border-bottom: 1px solid $border_color;
        }
        .record-detail{
          display: flex;
          .record-left{
            width: 675px;
            height: 190px;
            display: flex;
            padding: 25px 18px;
            .record-img{
              width: 140px;
              height: 140px;
              border: 1px solid  $border_color;
            }
            .record-name{
              margin: 0 40px 0 20px;
              width: 220px;
            }
            .record-num{
              line-height: 140px;
              margin-left: 56px;
            }
            .record-price{
              line-height: 140px;
              width: 65px;
              text-align: center
            }
          }
          .record-right{
            line-height: 190px;
            display: flex;
            text-align: center;
            div{
              border-left: 1px solid $border_color;
            }
            div:first-child {
              width: 142px;
            }
            .record-status{
              width: 110px;
              font-weight: bold;
            }
            .record-wl{
              width: 110px;
              span{
                background: $success;
                color: #ffffff;
                width: 80px;
                height: 25px;
                line-height: 25px;
                display: inline-block;
                margin: 0 auto;
                border-radius: 5px;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .record-table-no{
      text-align: center;
      margin: 20px 0;
      padding: 20px 0;
      background: #ffffff;
      border: 1px solid $border_color;
    }
  }
</style>
